<template>
  <div class="wrapper" @click="onClickItem">

    <div class="row jbetween">

      <div class="row all">
        <LImage v-if="item.counterImage" :src="item.counterImage" alt="" class="pair-img mr20" />
        <div v-else class="d-left-img mr20" />
        <text class="font32 text1">{{item.counterCoinShort}}</text>
      </div>
      <LImage v-if="pair == item.pair" :src="Config.img('ic_ai_right.png')" alt="" class="r-img" />
    </div>

    <div class="line1 height1 mt40"></div>
  </div>
</template>


<style src="@/_css/style.css" ></style>
<style scoped>
  .wrapper {
    display: flex;
    width: 750px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    flex-direction: column;
    justify-content: space-between;
   
  }
  .pair-img {
    width: 40px;
    height: 40px;
  }
  .pair-name {
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }

  .d-left-img {
    background-color: #f3ba00;
    width: 40px;
    height: 40px;
    border-radius: 40px;
  }
  .r-img {
    width: 40px;
    height: 40px;
  }
</style>

<script>
  import jconfig from "@/_js/config";
  import jmath from "@/_js/math";
  import I18N from "@/_i18n/i18n";
  import jdebug from "@/_js/debug";
  var T = I18N.t;
  export default {
    props: {
      item: {
        type: Object,
        default: undefined,
      },
      pair: {
        type: String,
        default: '',
      }
    },
    data: () => ({
      Config: jconfig,
      T: T,
    }),
    methods: {
      onClickItem() {
        this.$emit("onClickItem", this.item);
      },
    },
  };
</script>